
// 子传父 自定义事件
// 父传子 自定义属性
Vue.component('app-header', {
    template: '#app-top',
    data() {
        return {
            todolistMsg: ''
        }
    },
    methods: {
        sendMsg() {
            this.$emit('msgchange', this.todolistMsg);
            this.todolistMsg = '';
        }
    }
}); // new Vue() 简写
Vue.component('todo-list', {
    template: '#todo-list',
    data() {
        return {
            todolist: []
        }
    },
    methods:{
        clickToDel(index) {
            this.todolist.splice(index, 1);
        },
        add(index) {
            this.$emit('output', this.todolist.splice(index, 1)[0])
        }
    },
    props: ['title', 'injectmsg'],
    watch:{
        injectmsg(){
            this.injectmsg !== '' && this.todolist.push(this.injectmsg);
            this.$emit('update:injectmsg', '')
        }
    }
});
let app = new Vue({
        el: '.app',
        data: {
            temp: '',
            doneInput: '',
            doingInput: ''
        },
        methods: {
            msgchange(data) {
                this.temp = data;
            },
            doing(data){
                this.doneInput = data;
            },
            done(data) {
                this.doingInput = data;
            }
        },
        computed: {},
        props: [],
        watch: {
            temp() {
                this.doingInput = this.temp;
            }
        }
    })
